Created:01/01/2018
By: DynamicLayers
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The template page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="DynamicLayers">
<title>Barber Shop || Home</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Elegant Font Icons CSS -->
<link rel="stylesheet" href="css/elegant-font-icons.css">
<!-- Elegant Line Icons CSS -->
<link rel="stylesheet" href="css/elegant-line-icons.css">
<!-- Themify Icon CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- animate CSS -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/venobox/venobox.css">
<!-- OWL-Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Slick Nav CSS -->
<link rel="stylesheet" href="css/slicknav.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id='preloader' >
<div class='loader' >
<img src="img/loading.gif" width="80" alt="">
</div>
</div><!-- Preloader -->
<header id="header" class="header_section">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<img src="img/logo.png" alt="Logo">
</div>
<div id="navbar" class="navbar-right">
<ul id="mainmenu" class="nav navbar-nav nav-menu">
<li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a>
<ul>
<li><a href="index.html">Home 01</a></li>
<li><a href="index-2.html">Home 02</a></li>
<li><a href="index-3.html">Home 03</a></li>
</ul>
</li>
<li> <a href="about.html">About</a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="about-2.html">About 02</a></li>
</ul>
</li>
<li> <a href="services.html">Services</a>
<ul>
<li><a href="services.html">Service</a></li>
<li><a href="services-2.html">Service 02</a></li>
</ul>
</li>
<li> <a href="appointment.html">Appointment</a>
<ul>
<li><a href="appointment.html">Appointment</a></li>
<li><a href="appointment-2.html">Appointment 02</a></li>
</ul>
</li>
<li> <a href="#">Pages</a>
<ul>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="404.html">404 Not Found</a></li>
</ul>
</li>
<li><a href="blog-grid.html">News</a>
<ul>
<li><a href="blog-grid.html">News Grid</a></li>
<li><a href="blog-sidebar.html">News Sidebar</a></li>
<li><a href="blog-details.html">News Details</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav><!-- Navigation Bar -->
</header> <!-- Header_Section -->
<section class="slider_section">
</section><!-- /.slider_section -->
<section id="about" class="about_section bd-bottom padding">
</section> <!--/.about_section -->
<section class="service_section bg-grey bd-bottom padding">
</section><!--/.service_section -->
<section class="book_section padding">
</section><!--/.book_section -->
<section id="team" class="team_section bd-bottom padding">
</section><!-- /.team_section -->
<section id="reviews" class="testimonial_section padding">
</section><!-- /.testimonial_section -->
<section class="pricing_section bg-grey bd-bottom padding">
</section><!-- /.pricing_section -->
<section class="cta_section padding">
</section><!-- /.cta_section -->
<section id="news" class="blog_section bd-bottom padding">
</section><!-- /.blog_section -->
<div class="sponsor_section bg-grey">
</div><!-- ./sponsor_section -->
<section id="subscribe" class="widget_section padding">
</section><!-- /.widget_section -->
<footer class="footer_section">
</footer><!-- /.footer_section -->
<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- Imagesloaded JS -->
<script src="js/vendor/imagesloaded.pkgd.min.js"></script>
<!-- OWL-Carousel JS -->
<script src="js/vendor/owl.carousel.min.js"></script>
<!-- isotope JS -->
<script src="js/vendor/jquery.isotope.v3.0.2.js"></script>
<!-- Smooth Scroll JS -->
<script src="js/vendor/smooth-scroll.min.js"></script>
<!-- venobox JS -->
<script src="js/vendor/venobox.min.js"></script>
<!-- ajaxchimp JS -->
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<!-- Slick Nav JS -->
<script src="js/vendor/jquery.slicknav.min.js"></script>
<!-- YTPlayer JS -->
<script src="js/vendor/jquery.mb.YTPlayer.min.js"></script>
<!-- Contact JS -->
<script src="js/contact.js"></script>
<!-- Appointment JS -->
<script src="js/appointment.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header_section"> <nav class="navbar"> <div class="container"> <div class="navbar-header"> <img src="img/logo.png" alt="Logo"> </div> <div id="navbar" class="navbar-right"> <ul id="mainmenu" class="nav navbar-nav nav-menu"> <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a> <ul> <li><a href="index.html">Home 01</a></li> <li><a href="index-2.html">Home 02</a></li> <li><a href="index-3.html">Home 03</a></li> </ul> </li> <li> <a href="about.html">About</a> <ul> <li><a href="about.html">About</a></li> <li><a href="about-2.html">About 02</a></li> </ul> </li> <li> <a href="services.html">Services</a> <ul> <li><a href="services.html">Service</a></li> <li><a href="services-2.html">Service 02</a></li> </ul> </li> <li> <a href="appointment.html">Appointment</a> <ul> <li><a href="appointment.html">Appointment</a></li> <li><a href="appointment-2.html">Appointment 02</a></li> </ul> </li> <li> <a href="#">Pages</a> <ul> <li><a href="gallery.html">Gallery</a></li> <li><a href="team.html">Team</a></li> <li><a href="pricing.html">Pricing</a></li> <li><a href="404.html">404 Not Found</a></li> </ul> </li> <li><a href="blog-grid.html">News</a> <ul> <li><a href="blog-grid.html">News Grid</a></li> <li><a href="blog-sidebar.html">News Sidebar</a></li> <li><a href="blog-details.html">News Details</a></li> </ul> </li> <li><a href="contact.html">Contact</a></li> </ul> </div><!--/.navbar-collapse --> </div> </nav><!-- Navigation Bar --> </header> <!-- Header_Section -->
<section class="slider_section"> <ul id="main-slider" class="owl-carousel main_slider"> <li class="main_slide" style="background-image: url(img/slide-1.jpg);"> <div class="container"> <div class="display-table"> <div class="table-cell"> <div class="slider_content"> <h3 class="text-white">Its Not Just a Haircut, Its an Experience.</h3> <h1 class="text-white">Where Mens Want <br>To Look There Very Best.</h1> <p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> It has survived not only five centuries.</p> <div class="btn_group"> <a href="#" class="default_btn">Packages</a> <a href="#" class="default_btn">Book Now</a> </div> </div> </div> </div> </div> </li> </ul> </section><!-- /.slider_section -->
<section id="about" class="about_section bd-bottom padding"> <div class="container"> <div class="col-sm-6"> <div class="about_content align-center"> <h3 class="mb-15">Introducing</h3> <h2 class="mb-15">The Barber Shop Science 1991</h2> <img class="mb-20" src="img/about-logo.png" alt="logo"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <a href="#" class="default_btn">More About Us</a> </div> </div> <div class="col-sm-6 hidden-xs"> <div class="about_img"> <img src="img/about-1.jpg" alt="idea-images" class="about_img_1"> <img src="img/about-2.jpg" alt="idea-images" class="about_img_2"> <img src="img/about-3.jpg" alt="idea-images" class="about_img_3"> </div> </div> </div> </section> <!--/.about_section -->
<section class="service_section bg-grey bd-bottom padding"> <div class="container"> <div class="section_heading align-center mb-40"> <h2>Our Barber Services</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>It has survived not only five centuries.</p> </div> <div class="col-sm-3 col-xs-6 xs-padding"> <div class="service_content align-center"> <img src="img/service-1.jpg" alt="Services"> <h3>Haircut Styles</h3> <P>Lorem Ipsum is simply dummy<br> and typesetting industry.</P> </div> </div> </div> </section><!--/.service_section -->
<section class="book_section padding"> <div class="container"> <div class="col-sm-6"> <div class="book_content"> <h2>Make An Appointment</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>It has survived not only five centuries.</p> </div> </div> <div class="col-sm-6"> <div class="book_form"> <div class="section_heading mb-40"> <h2>Appointment Now</h2> <p>Lorem Ipsum is simply dummy text of the printing and industry.<br>It has survived not only five centuries.</p> </div> <form action="appointment.php" method="post" id="appointment_form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input type="text" id="app_name" name="app_name" class="form-control" placeholder="Name" required> </div> <div class="col-xs-6"> <input type="email" id="app_email" name="app_email" class="form-control" placeholder="Your Email" required> </div> </div> <div class="form-group"> <div class="col-xs-6"> <input type="text" id="app_phone" name="app_phone" class="form-control" placeholder="Your Phone No" required> </div> <div class="col-xs-6"> <input type="text" id="app_free_time" name="app_free_time" class="form-control" placeholder="Your Free Time" required> </div> </div> <div class="form-group"> <div class="col-xs-6"> <select class="form-control" id="app_services" name="app_services"> <option>Services</option> <option>Hair Styling</option> <option>Shaving</option> <option>Face Mask</option> <option>Hair Wash</option> <option>Beard Triming</option> </select> </div> <div class="col-xs-6"> <select class="form-control" id="app_barbers" name="app_barbers"> <option>Choose Barbers</option> <option>Michel Brown</option> <option>Jonathan Smith</option> <option>Jack Tosan</option> <option>Martin Lane</option> </select> </div> </div> <button id="app_submit" class="default_btn" type="submit">Book Now</button> <div id="msg-status" class="alert" role="alert"></div> </form> </div> </div> </div> </section><!--/.book_section -->
<section id="team" class="team_section bd-bottom padding"> <div class="container"> <div class="section_heading align-center mb-40"> <h2>Our Barbers</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>It has survived not only five centuries.</p> </div><!-- /.section_heading --> <ul class="team_members"> <li class="col-md-3 col-xs-6"> <div class="team_member"> <img src="img/team-1.jpg" alt="Team Member"> <div class="overlay"> <h3>JONATHAN SMITH</h3> <p>WEB DESIGNER</p> </div> </div> </li> </ul><!-- /.team_members --> </div> </section><!-- /.team_section -->
<section id="reviews" class="testimonial_section padding"> <div class="container"> <ul id="testimonial_carousel" class="testimonial_items owl-carousel"> <li class="testimonial_item"> <p>"There are design companies, and then there are user experience design interface design<br> professional. By far one of the worlds best known brands."</p> <h4 class="text-white">Anita Tran, IT Solutions.</h4> </li> </ul> </div> </section><!-- /.testimonial_section -->
<section class="pricing_section bg-grey bd-bottom padding"> <div class="container"> <div class="section_heading align-center mb-40"> <h2>Barber Pricing</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>It has survived not only five centuries.</p> </div><!-- /.section_heading --> <div class="col-sm-4 xs-padding"> <div class="price_wrap"> <h3>Hair Styling</h3> <ul class="price_list"> <li> <h4>Hair Cut</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <span class="price">$8</span> </li> <li> <h4>Hair Styling</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <span class="price">$9</span> </li> <li> <h4>Hair Triming</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <span class="price">$10</span> </li> </ul> </div> </div> </div> </section><!-- /.pricing_section -->
<section class="cta_section padding"> <div class="container"> <div class="display-table"> <div class="table-cel"> <div class="cta_content align-center"> <h2>Making You Look Good <br> Is In Our Haritage.</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>It has survived not only five centuries.</p> </div> </div> </div> </div> </section><!-- /.cta_section -->
<section id="news" class="blog_section bd-bottom padding"> <div class="container"> <div class="section_heading align-center mb-40"> <h2>Latest Blog Posts</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>It has survived not only five centuries.</p> </div><!-- /.section_heading --> <div class="col-sm-4 col-xs-6 xs-padding"> <div class="blog_post"> <img src="img/blog-1.jpg" alt="blog-image"> <div class="blog_content"> <h4><a href="#">The Ultimate Renters Guide</a></h4> <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit Ea ratione optio.</P> <span class="post_meta"><a href="">READ MORE</a></span> </div> </div> </div> </div> </section><!-- /.blog_section -->
<div class="sponsor_section bg-grey"> <div class="container"> <ul id="sponsor_carousel" class="sponsor_items owl-carousel"> <li class="sponsor_item"> <img src="img/sponsor-1.png" alt="sponsor-image"> </li> </ul> </div> </div><!-- ./sponsor_section -->
<section id="subscribe" class="widget_section padding"> <div class="container"> <div class="col-md-4 col-xs-6 xs-padding"> <div class="footer_widget"> <h3 class="text-white">Contact information</h3> <p>ADDRESS: 100 Tenth Avenue, New York City, NY 1001 <br>FOR BOOKING: (044) 359 0173</p> <ul class="widget_social"> <li><a href="#"><i class="social_facebook"></i></a></li> <li><a href="#"><i class="social_twitter"></i></a></li> <li><a href="#"><i class="social_googleplus"></i></a></li> <li><a href="#"><i class="social_instagram"></i></a></li> <li><a href="#"><i class="social_linkedin"></i></a></li> </ul> </div> </div> <div class="col-md-4 col-xs-6 xs-padding"> <div class="footer_widget"> <h3 class="text-white">Opening Hours</h3> <p>Monday - Friday 11:30AM - 2:00PM <br>Saturday - Sunday 4:30PM - 10:00PM <br>Monday - Friday 5:30PM - 11:00PM</p> </div> </div> <div class="col-md-4 col-xs-6 xs-padding"> <div class="footer_widget"> <h4 class="text-white">Subscribe to our contents</h4> <div class="subscribe_form"> <form action="#" class="subscribe_form"> <input type="email" name="email" id="subs-email" class="form_input" placeholder="Email Address..."> <button type="submit" class="submit">SUBSCRIBE</button> <div class="clearfix"></div> <div id="subscribe-result"> <p class="subscription-success"></p> <p class="subscription-error"></p> </div> </form> <p class="align-left">There are design companies and then there are user experience design professional.</p> </div><!-- Subscribe Form --> </div> </div> </div> </section><!-- /.widget_section -->
<footer class="footer_section"> <div class="container"> <div class="col-xs-6 xs-padding"> <div class="copyright">© 2018 Barbershop Powered by DynamicLayers</div> </div> <div class="col-xs-6 xs-padding"> <ul class="footer_social"> <li><a href="#">Orders</a></li> <li><a href="#">Terms</a></li> <li><a href="#">Report Problem</a></li> </ul> </div> </div> </footer><!-- /.footer_section -->
These are the css files:
This theme use these Javascript files:
bootstrap.min.js
smooth-scroll.min.js
owl.carousel.min.js
jquery.ajaxchimp.min.js
jquery-1.12.4.min.js
jquery.mb.YTPlayer.min.js
owl.carousel.min.js
venobox.min.js
wow.min.js
jquery.counterup.min.js
main.js
You can edit the contact.js files. for setting contact form
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
DynamicLayers